<template id="video">
    <div class="video">
    	<!--头部-->
    	
    	<div class="about_header">
			<img src="../../assets/images/class/title_bg_img.png" />
			<div class="about_title">
				<router-link to="/about_coach"><img src="../../assets/images/class/revert.png" /></router-link>
				<p>更多视频</p>
			</div>
		</div>
    	<!--头部结束-->
    	<div class="my_video" style="width: 100%;height: 200px;">
    		<video id="myvideo" :src="videoSrc" :poster="videoImg" :muted="muteStatus" :autoplay="playStatus" style="width: 100%;height: 200px;">
            your browser does not support the video tag
        </video>
        <span class="ico ico-sound" :class="{ active: isMute }" v-on:click="closeSoundClick()"></span>
        <span class="ico ico-skip"></span>
        <span class="ico ico-video" :class="{ hide: isPlay }" v-on:click="playClick()"></span>
    	</div>
     
    </div>
</template>

<script>export default {
	//name: 'BusImg',
	data() {
		return {
			 _dom:"",
            videoSrc:'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
            
            videoImg:'../../assets/images/about_coach/about_coach_02.png',
            playStatus:'',
            muteStatus:'',
            isMute:true,
            isPlay:false

		}

	},
	methods: {
		playClick() {
			this.isPlay = !this.isPlay;
			this.playStatus = 'autoplay';
		},

		closeSoundClick() {
			this.isMute = !this.isMute;
			if(this.isMute) {
				this.muteStatus = '';
			} else {
				this.muteStatus = 'muted';
			}
		},
		showOtherVideo(){
    let _this = this;
    setTimeout(function(){
        _this.flag = _this._dom.paused;
        if(!_this.flag){
            _this.showOtherVideo();
            console.log(_this.flag);
        }

    },5000)
    }

	}
}
</script>

<style scoped>
	
		@import "../../assets/css/video.css";
</style>